<html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>var __ez=__ez||{};__ez.stms=Date.now();__ez.evt={};__ez.script={};__ez.ck=__ez.ck||{};__ez.template={};__ez.template.isOrig=false;__ez.queue=function(){var e=0,i=0,t=[],n=!1,o=[],r=[],s=!0,a=function(e,i,n,o,r,s,a){var l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,d=this;this.name=e,this.funcName=i,this.parameters=null===n?null:p(n)?n:[n],this.isBlock=o,this.blockedBy=r,this.deleteWhenComplete=s,this.isError=!1,this.isComplete=!1,this.isInitialized=!1,this.proceedIfError=a,this.fWindow=l,this.isTimeDelay=!1,this.process=function(){f("... func = "+e),d.isInitialized=!0,d.isComplete=!0,f("... func.apply: "+e);var i=d.funcName.split("."),n=null,o=this.fWindow||window;i.length>3||(n=3===i.length?o[i[0]][i[1]][i[2]]:2===i.length?o[i[0]][i[1]]:o[d.funcName]),null!=n&&n.apply(null,this.parameters),!0===d.deleteWhenComplete&&delete t[e],!0===d.isBlock&&(f("----- F'D: "+d.name),u())}},l=function(e,i,t,n,o,r,s){var a=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,l=this;this.name=e,this.path=i,this.async=o,this.defer=r,this.isBlock=t,this.blockedBy=n,this.isInitialized=!1,this.isError=!1,this.isComplete=!1,this.proceedIfError=s,this.fWindow=a,this.isTimeDelay=!1,this.isPath=function(e){return"/"===e[0]&&"/"!==e[1]},this.getSrc=function(e){return void 0!==window.__ezScriptHost&&this.isPath(e)&&"banger.js"!==this.name?window.__ezScriptHost+e:e},this.process=function(){l.isInitialized=!0,f("... file = "+e);var i=this.fWindow?this.fWindow.document:document,t=i.createElement("script");t.src=this.getSrc(this.path),!0===o?t.async=!0:!0===r&&(t.defer=!0),t.onerror=function(){var e={url:window.location.href,name:l.name,path:l.path,user_agent:window.navigator.userAgent};"undefined"!=typeof _ezaq&&(e.pageview_id=_ezaq.page_view_id);var i=encodeURIComponent(JSON.stringify(e)),t=new XMLHttpRequest;t.open("GET","//g.ezoic.net/ezqlog?d="+i,!0),t.send(),f("----- ERR'D: "+l.name),l.isError=!0,!0===l.isBlock&&u()},t.onreadystatechange=t.onload=function(){var e=t.readyState;f("----- F'D: "+l.name),e&&!/loaded|complete/.test(e)||(l.isComplete=!0,!0===l.isBlock&&u())},i.getElementsByTagName("head")[0].appendChild(t)}},d=function(e,i){this.name=e,this.path="",this.async=!1,this.defer=!1,this.isBlock=!1,this.blockedBy=[],this.isInitialized=!0,this.isError=!1,this.isComplete=i,this.proceedIfError=!1,this.isTimeDelay=!1,this.process=function(){}};function c(e){!0!==h(e)&&0!=s&&e.process()}function h(e){if(!0===e.isTimeDelay&&!1===n)return f(e.name+" blocked = TIME DELAY!"),!0;if(p(e.blockedBy))for(var i=0;i<e.blockedBy.length;i++){var o=e.blockedBy[i];if(!1===t.hasOwnProperty(o))return f(e.name+" blocked = "+o),!0;if(!0===e.proceedIfError&&!0===t[o].isError)return!1;if(!1===t[o].isComplete)return f(e.name+" blocked = "+o),!0}return!1}function f(e){var i=window.location.href,t=new RegExp("[?&]ezq=([^&#]*)","i").exec(i);"1"===(t?t[1]:null)&&console.debug(e)}function u(){++e>200||(f("let's go"),m(o),m(r))}function m(e){for(var i in e)if(!1!==e.hasOwnProperty(i)){var t=e[i];!0===t.isComplete||h(t)||!0===t.isInitialized||!0===t.isError?!0===t.isError?f(t.name+": error"):!0===t.isComplete?f(t.name+": complete already"):!0===t.isInitialized&&f(t.name+": initialized already"):t.process()}}function p(e){return"[object Array]"==Object.prototype.toString.call(e)}return window.addEventListener("load",(function(){setTimeout((function(){n=!0,f("TDELAY -----"),u()}),5e3)}),!1),{addFile:function(e,i,n,s,a,d,h,f,u){var m=new l(e,i,n,s,a,d,h,u);!0===f?o[e]=m:r[e]=m,t[e]=m,c(m)},addDelayFile:function(e,i){var n=new l(e,i,!1,[],!1,!1,!0);n.isTimeDelay=!0,f(e+" ...  FILE! TDELAY"),r[e]=n,t[e]=n,c(n)},addFunc:function(e,n,s,l,d,h,f,u,m,p){!0===h&&(e=e+"_"+i++);var w=new a(e,n,s,l,d,f,u,p);!0===m?o[e]=w:r[e]=w,t[e]=w,c(w)},addDelayFunc:function(e,i,n){var o=new a(e,i,n,!1,[],!0,!0);o.isTimeDelay=!0,f(e+" ...  FUNCTION! TDELAY"),r[e]=o,t[e]=o,c(o)},items:t,processAll:u,setallowLoad:function(e){s=e},markLoaded:function(e){if(e&&0!==e.length){if(e in t){var i=t[e];!0===i.isComplete?f(i.name+" "+e+": error loaded duplicate"):(i.isComplete=!0,i.isInitialized=!0)}else t[e]=new d(e,!0);f("markLoaded dummyfile: "+t[e].name)}},logWhatsBlocked:function(){for(var e in t)!1!==t.hasOwnProperty(e)&&h(t[e])}}}();__ez.evt.add=function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n()},__ez.evt.remove=function(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):delete e["on"+t]};__ez.script.add=function(e){var t=document.createElement("script");t.src=e,t.async=!0,t.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(t)};__ez.dot={};__ez.queue.addFile('/detroitchicago/boise.js', '/detroitchicago/boise.js?gcb=195-2&cb=2', true, [], true, false, true, false);__ez.queue.addFile('/parsonsmaize/abilene.js', '/parsonsmaize/abilene.js?gcb=195-2&cb=28', true, [], true, false, true, false);</script>
<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({}, typeof window._ezaq !== "undefined" ? window._ezaq : {}, {"ad_cache_level":1,"domain_id":173770,"ezcache_level":2,"ezcache_skip_code":0,"has_bad_image":0,"has_bad_words":0,"is_sitespeed":0,"lt_cache_level":0,"page_view_id":"b12334a0-e3cf-4353-4e20-63f29c03af8e","response_size_orig":79481,"response_time_orig":4,"template_id":134,"url":"https://plantuml.com/de/component-diagram","word_count":1816,"worst_bad_word_level":0});__ez.queue.markLoaded('ezaqBaseReady');</script>
<script type="text/javascript">(function(){function storageAvailable(type){var storage;try{storage=window[type];var x='__storage_test__';storage.setItem(x,x);storage.removeItem(x);return true;}
catch(e){return e instanceof DOMException&&(e.code===22||e.code===1014||e.name==='QuotaExceededError'||e.name==='NS_ERROR_DOM_QUOTA_REACHED')&&(storage&&storage.length!==0);}}
function remove_ama_config(){if(storageAvailable('localStorage')){localStorage.removeItem("google_ama_config");}}
remove_ama_config()})()</script>
<script type="text/javascript">var ezoicTestActive = true</script>
<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({}, typeof window._ezaq !== "undefined" ? window._ezaq : {}, {"ab_test_id":"mod174-c","ad_cache_level":1,"ad_count_adjustment":0,"ad_lazyload_version":0,"ad_load_version":1,"ad_location_ids":"","adx_ad_count":0,"ai_placeholder_cache_level":1,"ai_placeholder_placement_cnt":-1,"bidder_method":1,"bidder_version":3,"city":"Krasnoyarsk","country":"RU","days_since_last_visit":-1,"display_ad_count":0,"domain_id":173770,"domain_test_group":20230802,"ds_adsize_opt_id":-1,"engaged_time_visit":0,"ezcache_level":2,"ezcache_skip_code":0,"form_factor_id":1,"framework_id":1,"has_bad_image":0,"has_bad_words":0,"iab_category":"","iab_category_0":"596","is_embed":false,"is_from_recommended_pages":false,"is_return_visitor":false,"is_sitespeed":0,"last_page_load":"","last_pageview_id":"","lt_cache_level":0,"max_ads":0,"metro_code":0,"optimization_version":1,"page_ad_positions":"","page_view_count":66,"page_view_id":"b12334a0-e3cf-4353-4e20-63f29c03af8e","position_selection_id":0,"postal_code":"660000","pv_event_count":0,"response_size_orig":79481,"response_time_orig":4,"serverid":"i-01330c5887ea3c035","state":"KYA","sub_page_ad_positions":"","t_epoch":1697690870,"template_id":134,"time_on_site_visit":0,"url":"https://plantuml.com/de/component-diagram","word_count":1816,"worst_bad_word_level":0});__ez.queue.markLoaded('ezaqReady');</script>
<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>__ez.queue.addFile('/parsonsmaize/mulvane.js', '/parsonsmaize/mulvane.js?gcb=195-2&cb=5', true, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/parsonsmaize/olathe.js', '/parsonsmaize/olathe.js?gcb=195-2&cb=20', false, ['/parsonsmaize/abilene.js','/parsonsmaize/mulvane.js'], true, false, true, false);__ez.queue.addFile('/porpoiseant/et.js', '/porpoiseant/et.js?gcb=195-2&cb=2', false, [], true, false, true, false);!function(){var e;__ez.vep=(e=[],{Add:function(i,t){__ez.dot.isDefined(i)&&__ez.dot.isValid(t)&&e.push({type:"video",video_impression_id:i,domain_id:__ez.dot.getDID(),t_epoch:__ez.dot.getEpoch(0),data:__ez.dot.dataToStr(t)})},Fire:function(){if(void 0===document.visibilityState||"prerender"!==document.visibilityState){if(__ez.dot.isDefined(e)&&e.length>0)for(;e.length>0;){var i=5;i>e.length&&(i=e.length);var t=e.splice(0,i),o=__ez.dot.getURL("/detroitchicago/grapefruit.gif")+"?orig="+(!0===__ez.template.isOrig?1:0)+"&v="+btoa(JSON.stringify(t));__ez.dot.Fire(o)}e=[]}}})}();</script><script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>!function(){function e(i){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(i)}__ez.pel=function(){var i=[];function t(t,o,d,_,n,r,a,s){if(__ez.dot.isDefined(t)&&0!=__ez.dot.isAnyDefined(t.getSlotElementId,t.ElementId)){void 0===s&&(s=!1);var p=parseInt(__ez.dot.getTargeting(t,"ap")),f=__ez.dot.getSlotIID(t),u=__ez.dot.getAdUnit(t,s),z=parseInt(__ez.dot.getTargeting(t,"compid")),g=0,c=0,l=function(i){if("undefined"==typeof _ezim_d)return!1;var t=__ez.dot.getAdUnitPath(i).split("/").pop();if("object"===("undefined"==typeof _ezim_d?"undefined":e(_ezim_d))&&_ezim_d.hasOwnProperty(t))return _ezim_d[t];for(var o in _ezim_d)if(o.split("/").pop()===t)return _ezim_d[o];return!1}(t);"object"==e(l)&&(void 0!==l.creative_id&&(c=l.creative_id),void 0!==l.line_item_id&&(g=l.line_item_id)),__ez.dot.isDefined(f,u)&&__ez.dot.isValid(o)&&("0"===f&&!0!==s||""===u||i.push({type:"impression",impression_id:f,domain_id:__ez.dot.getDID(),unit:u,t_epoch:__ez.dot.getEpoch(0),revenue:d,est_revenue:_,ad_position:p,ad_size:"",bid_floor_filled:n,bid_floor_prev:r,stat_source_id:a,country_code:__ez.dot.getCC(),pageview_id:__ez.dot.getPageviewId(),comp_id:z,line_item_id:g,creative_id:c,data:__ez.dot.dataToStr(o),is_orig:s||__ez.template.isOrig}))}}function o(){void 0!==document.visibilityState&&"prerender"===document.visibilityState||(__ez.dot.isDefined(i)&&i.length>0&&[i.filter((function(e){return e.is_orig})),i.filter((function(e){return!e.is_orig}))].forEach((function(e){for(;e.length>0;){var i=e[0].is_orig||!1,t=5;t>e.length&&(t=e.length);var o=e.splice(0,t),d=__ez.dot.getURL("/porpoiseant/army.gif")+"?orig="+(!0===i?1:0)+"&sts="+btoa(JSON.stringify(o));(void 0!==window.isAmp&&isAmp||void 0!==window.ezWp&&ezWp)&&void 0!==window._ezaq&&_ezaq.hasOwnProperty("domain_id")&&(d+="&visit_uuid="+_ezaq.visit_uuid),__ez.dot.Fire(d)}})),i=[])}return{Add:t,AddAndFire:function(e,i){t(e,i,0,0,0,0,0),o()},AddAndFireOrig:function(e,i){t(e,i,0,0,0,0,0,!0),o()},AddById:function(e,t,o,d){var _=e.split("/");if(__ez.dot.isDefined(e)&&3===_.length&&__ez.dot.isValid(t)){var n=_[0],r={type:"impression",impression_id:_[2],domain_id:__ez.dot.getDID(),unit:n,t_epoch:__ez.dot.getEpoch(0),pageview_id:__ez.dot.getPageviewId(),data:__ez.dot.dataToStr(t),is_orig:o||__ez.template.isOrig};void 0!==d&&(r.revenue=d),i.push(r)}},Fire:o,GetPixels:function(){return i}}}()}();__ez.queue.addFile('/detroitchicago/raleigh.js', '/detroitchicago/raleigh.js?gcb=195-2&cb=6', false, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/detroitchicago/vista.js', '/detroitchicago/vista.js?gcb=195-2&cb=5', false, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/detroitchicago/tampa.js', '/detroitchicago/tampa.js?gcb=195-2&cb=5', false, ['/parsonsmaize/abilene.js'], true, false, true, false);</script><base href=""/><meta name="flattr:id" content="1ew3x0"/><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "https://plantuml.com",
  "name": "PlantUML",
  "sameAs" : ["https://twitter.com/plantuml","https://en.wikipedia.org/wiki/PlantUML","https://www.wikidata.org/wiki/Q18346546"],
  "logo": "https://cdn-0.plantuml.com/logo3.png",
  "contactPoint": [{
    "@type": "ContactPoint",
    "email": "plantuml@gmail.com",
    "url": "https://plantuml.com",
    "contactType": "customer service"
  }]
}
</script><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://plantuml.com",
      "name": "Home"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://plantuml.com/sitemap-language-specification",
      "name": "Language specification"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://plantuml.com/component-diagram",
      "name": "Component Diagram"
  }
  }]
}
</script><link rel="canonical" href="component-diagram.html"/><link rel="alternate" hreflang="x-default" href="../component-diagram.html"/><link rel="alternate" hreflang="de" href="component-diagram.html"/><link rel="alternate" hreflang="en" href="../component-diagram.html"/><link rel="alternate" hreflang="es" href="../es/component-diagram.html"/><link rel="alternate" hreflang="fr" href="../fr/component-diagram.html"/><link rel="alternate" hreflang="ja" href="../ja/component-diagram.html"/><link rel="alternate" hreflang="ru" href="../ru/component-diagram.html"/><link rel="alternate" hreflang="ko" href="../ko/component-diagram.html"/><link rel="alternate" hreflang="zh" href="../zh/component-diagram.html"/><link rel="shortcut icon" href="../favicon.ico"/><link rel="preload" as="image" href="../svgrepo-house.svg"/><link rel="preload" as="image" href="../svgrepo-text-news.svg"/><link rel="preload" as="image" href="../svgrepo-rocket-3-start.svg"/><link rel="preload" as="image" href="../svgrepo-server.svg"/><link rel="preload" as="image" href="../svgrepo-play.svg"/><link rel="preload" as="image" href="../svgrepo-forum.svg"/><link rel="preload" as="image" href="../svgrepo-add-to-online-cart.svg"/><link rel="preload" as="image" href="../svgrepo-forum-message.svg"/><link rel="preload" as="image" href="../svgrepo-palette-fill.svg"/><link rel="preload" as="image" href="../svgrepo-cpu.svg"/><link rel="preload" as="image" href="../svgrepo-books-library.svg"/><link rel="preload" as="image" href="../svgrepo-signpost-fill.svg"/><link rel="preload" as="image" href="../svgrepo-library.svg"/><link rel="preload" as="image" href="../flags21.png"/><link rel="preload" as="image" href="../svgrepo-uxwing-light-mode-toggle.svg"/><title>Komponentendiagramm Syntax und Funktionen</title><meta name="description" content="PlantUML Komponentendiagramm Syntax: Sie können Schnittstellen, Komponenten, Beziehungen, Gruppen, Notizen definieren. Ändern von Schriften und Farben ist ebenfalls möglich."/><meta property="og:type" content="article"/><meta property="og:title" content="Komponentendiagramm Syntax und Funktionen"/><meta property="og:description" content="PlantUML Komponentendiagramm Syntax: Sie können Schnittstellen zu definieren, Komponenten, Beziehungen, Gruppen, Notizen ... Ändern von Schriften und Farben ist ebenfalls möglich."/><meta property="og:url" content="https://plantuml.com/de/component-diagram"/><meta property="og:site_name" content="PlantUML.com"/><meta name="twitter:image" content="https://plantuml.com/og-component-diagram"/><meta property="og:locale" content="de"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Komponentendiagramm Syntax und Funktionen"/><meta name="twitter:description" content="PlantUML Komponentendiagramm Syntax: Sie können Schnittstellen zu definieren, Komponenten, Beziehungen, Gruppen, Notizen ... Ändern von Schriften und Farben ist ebenfalls möglich."/><meta name="twitter:site" content="@PlantUML"/><meta name="twitter:creator" content="@PlantUML"/><style>li{margin:2px}#external li{margin:13px}.pezoic{max-width:970px}@media screen and (max-width:1600px){.pezoic{max-width:768px}}.coptable{max-width:90%}.mytab{display:inline-block;border-radius:3px;border:1px solid #e1e4e8}.mytab:hover{border:1px dashed #0366d6;cursor:pointer;color:#0366d6;background:#f6f8fa}.cop{margin:25px 10px 0 10px}.cop:hover{cursor:pointer;filter:invert(30%) sepia(75%) saturate(4001%) hue-rotate(201deg) brightness(88%) contrast(98%)}.cop2{margin:25px 10px 0 10px}.cop2:hover{cursor:pointer}.msg{position:absolute;color:#396;background-color:#FFF;margin-top:55px;display:none;border-radius:3px;border:1px solid #4dff00}.mycell0{float:left;vertical-align:top;padding:10px}.mycell0 code:hover{cursor:default;color:#000}.mycell{float:right;vertical-align:top;padding:10px;max-width:55vw;overflow-x:auto}.mycell0 pre{max-width:55vw;overflow-x:auto}.cod{background:#edeff3;padding:2px 5px;border-radius:3px}.colo{display:inline-block;background:#edeff3;padding:7px 12px;border-radius:3px}.tag,.tagg,.tago,.tagr{text-rendering:optimizeLegibility;display:inline-block;padding:3px 5px 2px 4px;text-decoration:none;white-space:nowrap;border:1px solid #999;text-transform:uppercase;text-align:center;border-radius:3px;font-size:11px;font-weight:bold;line-height:90%}.tag{background-color:#eee}.tagg{background-color:#98fb98}.tago{background-color:#fafa00}.tagr{background-color:#ff4500}a{text-decoration:none;color:#0366d6}a:hover{text-decoration:underline}.menu1{border:0;font-family:Helvetica,sans-serif;font-size:14px;padding:0;margin:0;white-space:nowrap;overflow:hidden;vertical-align:middle;line-height:30px}.menu1 a{text-align:center;padding:10px 7px 10px 7px;text-decoration:none;color:#637282}.menu1 a:hover{color:#0366d6}#menu0{top:0;z-index:4;margin:0 0 0 10px;padding:0}@media screen and (max-width:1200px){#menu0{visibility:hidden}}.mhov img{margin:0 5px 0 0;padding:0}.mhov:hover{filter:invert(25%) sepia(97%) saturate(2026%) hue-rotate(201deg) brightness(91%) contrast(98%)}#menuside2{border:0;font-family:Helvetica,sans-serif;font-size:14px;padding:20px 0 4px 0;margin:0}#menuside2 span{vertical-align:top}#menuside2 li{list-style:none;position:relative;padding:0;margin:10px 20px 10px 10px;border:0}#menuside2 li a{display:inline-block;text-decoration:none;color:#637282;width:100%}#BC{z-index:0;padding-top:5px;top:35px}.breadcrumb{z-index:1;font-family:Helvetica,sans-serif;font-size:14px;text-align:center;display:inline-block;overflow:hidden;border-radius:5px}.breadcrumb a{text-decoration:none;outline:0;display:block;float:left;font-size:12px;line-height:24px;color:#373f49;padding:0 10px 0 35px;background:#f0f1f1;background:linear-gradient(#f0f1f1,#c6d2d2);position:relative}.breadcrumb a:first-child{padding-left:21px;border-radius:5px 0 0 5px}.breadcrumb a:first-child:before{left:14px}.breadcrumb a:last-child{visibility:hidden}.breadcrumb a.active,.breadcrumb a:hover{color:#0366d6;background:#c6d2d2;background:linear-gradient(#e3e4e4,#b8c7c7)}.breadcrumb a.active:after,.breadcrumb a:hover:after{background:#c6d2d2;background:linear-gradient(135deg,#e3e4e4,#b8c7c7)}.breadcrumb a:after{content:'';position:absolute;top:0;right:-12px;width:24px;height:24px;transform:scale(0.707) rotate(45deg);z-index:1;background:#f0f1f1;background:linear-gradient(135deg,#f0f1f1,#c6d2d2);box-shadow:2px -2px 0 2px rgba(0,0,0,0.1),3px -3px 0 2px rgba(255,255,255,0.1);border-radius:0 5px 0 50px}.breadcrumb a:last-child:after{content:none;visibility:hidden}.lga,.lga a,.lgi,.lgi a{font-family:Helvetica,sans-serif;font-size:13px;text-align:center;color:#fff;padding:0 5px;margin:0}.lga,.lga a{background-color:#008}.lgi,.lgi a{background-color:#888}.lga:hover,.lga:hover a{text-decoration:none;color:#BBB}.lgi:hover,.lgi:hover a{text-decoration:none;color:#CCC}</style><style>.backtop{margin:0 10px}.backtop:hover{cursor:pointer;filter:invert(30%) sepia(75%) saturate(4001%) hue-rotate(201deg) brightness(88%) contrast(98%)}</style><style>.dropbtn{padding:0;border:0;background:0}.dropdown{position:relative;display:inline-block;margin:0 10px}.dropdown-content{display:none;position:absolute;background-color:#f1f1f1;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}.dropdown-content img{vertical-align:middle;margin:0 8px 0 1px}.dropdown-content a{font-size:small;font-weight:normal;color:black;padding:5px 10px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#ddd;color:#0366d6}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .dropbtn{background-color:#3e8e41}</style><style>#flex1{margin:0;padding:0;display:flex;flex-direction:row;width:378px;height:100%}#lll{flex-grow:1;flex-shrink:1;max-width:162px;overflow:hidden}#mmm{flex-grow:0;flex-shrink:0;background:#edeff3;width:210px;min-width:210px;max-width:210px;flex-grow:0;flex-shrink:0;border-left:1px solid #d4d8de}#qqq{flex-grow:0;flex-shrink:0;width:4px;min-width:4px;max-width:4px;flex-grow:0;flex-shrink:0}#rrr{flex-grow:1;flex-shrink:1;max-width:162px;overflow:hidden}.cde{display:flex;flex-direction:column;justify-content:space-between;height:100%}.cd{display:flex;flex-direction:column;justify-content:space-start;height:100%}.aaa{height:30px;min-height:30px;max-height:30px;flex-grow:0;flex-shrink:0;background:#edeff3;border-bottom:1px solid #d4d8de}.bbb,.bbborder{flex-grow:1;flex-shrink:0}.bbborder{border-left:1px solid #d4d8de}#header{z-index:10;position:fixed;left:378px;right:0;height:30px;top:0;background:#edeff3;border-bottom:1px solid #d4d8de}#header2{z-index:7;position:fixed;left:378px;right:0;height:10px;top:30px;background:#fefefe}#left0{top:0;position:fixed;left:0;margin:0;bottom:0;width:378px;padding:0;z-index:2}#root{padding:0;margin:40px 0 0 388px;background:#fefefe}body{margin:auto;overflow-x:hidden;background:#fefefe}@media screen and (max-width:1190px){#flex1,#left0{width:215px}#root{margin:40px 0 0 224px}#header,#header2{left:215px}#left0{left:0}#lll,#rrr{width:0;visibility:hidden;flex-grow:0;flex-shrink:0}}@media screen and (max-width:1010px){#root{margin:0 0 0 216px}#header,#header2{display:none}#lll,#qqq{width:0;visibility:hidden;flex-grow:0;flex-shrink:0}#mmm{border-right:1px solid #d4d8de}}@media screen and (min-width:1700px){#header,#header2{left:518px}#left0,#flex1{width:518px}#root{margin-left:528px}#lll,#rrr{max-width:302px}}</style><script>window.pushMST_config={vapidPK:"BBodn2vLFoDO5AdCfmOOzNmcUsn52kTA6JNZNYVFymzEdWHonz_bkUcsaTkPXHvNGRkRUSAxMbup-H0l2sb1h_Q",enableOverlay:true,swPath:"/sw.js",i18n:{}};var pushmasterTag=document.createElement("script");pushmasterTag.src="https://cdn.pushmaster-cdn.xyz/scripts/publishers/629f5e297baecc00098a271b/SDK.js";pushmasterTag.setAttribute("defer","");var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(pushmasterTag,firstScriptTag);</script><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-TKZNNQT9CZ"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date());gtag("config","G-TKZNNQT9CZ");</script><script>var llg="de";var az=0;var amdark=0;function ljs(b){if(az){return false}var a=document.createElement("script");a.type="text/javascript";a.src="/btn-"+b+".js";document.body.innerHTML="<i style='position:absolute;top:30%;width:100%;'><center>Loading in progress...";document.body.appendChild(a)}function ctc(c){document.getElementById("img"+c).classList.remove("cop");document.getElementById("img"+c).classList.add("cop2");document.getElementById("pre"+c).style.backgroundColor="#4dff00";document.getElementById("msg"+c).style.display="inline";setTimeout(function(){document.getElementById("img"+c).classList.remove("cop2");document.getElementById("img"+c).classList.add("cop");document.getElementById("pre"+c).style.backgroundColor="";document.getElementById("msg"+c).style.display="none"},800);text=document.getElementById("pre"+c).innerText;if(window.clipboardData&&window.clipboardData.setData){return window.clipboardData.setData("Text",text)}else{if(document.queryCommandSupported&&document.queryCommandSupported("copy")){var a=document.createElement("textarea");a.textContent=text;a.style.position="fixed";document.body.appendChild(a);a.select();try{return document.execCommand("copy")}catch(b){return false}finally{document.body.removeChild(a)}}}};</script><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script type='text/javascript'>
var ezoTemplate = 'pub_site';
var ezouid = '1';
var ezoFormfactor = '1';
</script><script data-ezscrex="false" type='text/javascript'>
var soc_app_id = '0';
var did = 173770;
var ezdomain = 'plantuml.com';
var ezoicSearchable = 1;
</script>
<script data-ezscrex='false' data-pagespeed-no-defer data-cfasync='false'>
function create_ezolpl() {
	var d = new Date();
	d.setTime(d.getTime() + (365*24*60*60*1000));
	var expires = "expires="+d.toUTCString();
	__ez.ck.setByCat("ezux_lpl_173770=" + new Date().getTime() + "|" + _ezaq.page_view_id + "|" + _ezaq.is_return_visitor + "; " + expires, 3);
}
function attach_ezolpl() {
	if (document.readyState === "complete") {
		create_ezolpl();
		return;
	}
	window.addEventListener("load", create_ezolpl);
}

__ez.queue.addFunc("attach_ezolpl", "attach_ezolpl", null, false, ['/detroitchicago/boise.js'], true, false, false, false);
</script></head><body><div id="left0"><div id="flex1"><div id="lll"><div class="cde"><div></div><div><span id="ezoic-pub-ad-placeholder-131"></span><!-- ezoic_pub_ad_placeholder-131-sidebar-120x600-131-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-131-sidebar-160x600-131-nonexxxnonexxxxxxezmaxscaleval100 --></div><div></div></div></div><div id="mmm"><div class="cde"><div><div><span id="ezoic-pub-ad-placeholder-105"></span><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-120x240-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-125x125-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-180x150-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-200x200-105-nonexxxnonexxxxxxezmaxscaleval100 --></div><ul id="menuside2"><li><a href="index.html" class="mhov"><img src="../svgrepo-house.svg" width="16" height="16"/><span>Home</span></a></li><li><a href="news.html" class="mhov"><img src="../svgrepo-text-news.svg" width="16" height="16"/><span>Was gibt es Neues?</span></a></li><li><a href="starting.html" class="mhov"><img src="../svgrepo-rocket-3-start.svg" width="16" height="16"/><span>Erste Schritte</span></a></li><li><a href="https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" class="mhov"><img src="../svgrepo-server.svg" width="16" height="16"/><span>Online Server</span></a></li><li><a href="running.html" class="mhov"><img src="../svgrepo-play.svg" width="16" height="16"/><span>Running</span></a></li><li><a href="faq.html" class="mhov"><img src="../svgrepo-forum.svg" width="16" height="16"/><span>F.A.Q.</span></a></li><li><a href="download.html" class="mhov"><img src="../svgrepo-add-to-online-cart.svg" width="16" height="16"/><span>Download</span></a></li><li><a href="../qa.html" class="mhov"><img src="../svgrepo-forum-message.svg" width="16" height="16"/><span>Forum</span></a></li><li><a href="theme.html" class="mhov"><img src="../svgrepo-palette-fill.svg" width="16" height="16"/><span>Theme</span></a></li><li><a href="preprocessing.html" class="mhov"><img src="../svgrepo-cpu.svg" width="16" height="16"/><span>Vorverarbeitung</span></a></li><li><a href="stdlib.html" class="mhov"><img src="../svgrepo-books-library.svg" width="16" height="16"/><span>Standard Bibliothek</span></a></li><li><a href="https://crashedmind.github.io/PlantUMLHitchhikersGuide" class="mhov"><img src="../svgrepo-signpost-fill.svg" width="16" height="16"/><span>Hitchhiker&#39;s Guide</span></a></li><li><a href="guide.html" class="mhov"><img src="../svgrepo-library.svg" width="16" height="16"/><span>PDF Leitfaden</span></a></li></ul><div><span id="ezoic-pub-ad-placeholder-108"></span><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-120x240-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-125x125-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-180x150-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-200x200-108-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><div></div><div style="margin-bottom:35px;"><span id="ezoic-pub-ad-placeholder-186"></span><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-120x240-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-125x125-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-180x150-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-200x200-186-nonexxxnonexxxxxxezmaxscaleval100 --></div></div></div><div id="qqq"><div class="cd"><div class="aaa"></div><div class="bbborder"></div></div></div><div id="rrr"><div class="cd"><div class="aaa"></div><div style="height:5px;"></div><div class="bbb"><div class="cde"><div></div><div><span id="ezoic-pub-ad-placeholder-175"></span><!-- ezoic_pub_ad_placeholder-175-sidebar-120x600-175-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-175-sidebar-160x600-175-nonexxxnonexxxxxxezmaxscaleval100 --></div><div></div></div></div></div></div></div></div><style>#contmenu{display:flex;height:30px;width:100%;margin:0;padding:0}#contmenua{height:30px;padding-right:25px}#contmenub{z-index:15;display:inline-block;flex-grow:1;flex-shrink:1;height:30px;background-color:#edeff3}#magic{white-space:nowrap;overflow:hidden;z-index:14;position:fixed;top:0;right:50px;height:30px;width:30px}#magic2{white-space:nowrap;overflow:hidden;z-index:16;position:fixed;top:0;right:0;height:30px;width:50px;background-color:#edeff3}#magic2 img{margin:5px 0 0 5px;filter:invert(44%) sepia(27%) saturate(310%) hue-rotate(170deg) brightness(92%) contrast(83%)}#magic2:hover img{filter:invert(25%) sepia(97%) saturate(2026%) hue-rotate(201deg) brightness(91%) contrast(98%)}#magic:hover #svgrepoleft{filter:invert(22%) sepia(53%) saturate(4563%) hue-rotate(202deg) brightness(95%) contrast(98%)}#magic:hover{width:100%;height:31px}#aze{height:30px;display:flex;flex-direction:row-reverse}#aze1{height:30px;background-color:#edeff3}#aze2{height:30px;background-color:#edeff3;padding-left:10px;border-left:1px solid #d4d8de;border-bottom:1px solid #d4d8de}#aze1 img{filter:invert(46%) sepia(6%) saturate(1254%) hue-rotate(171deg) brightness(94%) contrast(92%)}#aze3{width:3px;height:30px;background-color:#edeff3}</style><div id="header"><div id="contmenu"><div id="contmenua"><div class="menu1"><a href="sequence-diagram.html">Sequenz</a><a href="use-case-diagram.html">Anwendungsfall</a><a href="class-diagram.html">Klasse</a><a href="activity-diagram-beta.html">Aktivität</a><a href="component-diagram.html">Komponente</a><a href="state-diagram.html">Zustand</a><a href="object-diagram.html">Objekt</a><a href="deployment-diagram.html">Einsatz</a><a href="timing-diagram.html">Zeitverlauf</a><a href="nwdiag.html">Network</a><a href="salt.html">Wireframe</a><a href="archimate-diagram.html">Archimate</a><a href="gantt-diagram.html">Gantt</a><a href="mindmap-diagram.html">MindMap</a><a href="wbs-diagram.html">WBS</a><a href="json.html">JSON</a><a href="yaml.html">YAML</a></div></div><div id="contmenub"></div></div><div id="magic"><div id="aze"><div id="aze1"><img id="svgrepoleft" width="30" height="30" src="../svgrepo-left.svg"/></div><div id="aze2"><div class="menu1"><a href="sequence-diagram.html">Sequenz</a><a href="use-case-diagram.html">Anwendungsfall</a><a href="class-diagram.html">Klasse</a><a href="activity-diagram-beta.html">Aktivität</a><a href="component-diagram.html">Komponente</a><a href="state-diagram.html">Zustand</a><a href="object-diagram.html">Objekt</a><a href="deployment-diagram.html">Einsatz</a><a href="timing-diagram.html">Zeitverlauf</a><a href="nwdiag.html">Network</a><a href="salt.html">Wireframe</a><a href="archimate-diagram.html">Archimate</a><a href="gantt-diagram.html">Gantt</a><a href="mindmap-diagram.html">MindMap</a><a href="wbs-diagram.html">WBS</a><a href="json.html">JSON</a><a href="yaml.html">YAML</a></div></div><div id="aze3"></div></div></div><div id="magic2"><a href="../de-dark/component-diagram.html"><img src="../svgrepo-uxwing-light-mode-toggle.svg" height="20"/></a></div></div><div id="header2"></div><div id="root"><style>#haut1{margin:50px 0 20px;padding:0;min-height:80px}#donate{padding-top:5px;min-height:30px}</style><div id="haut1"><div style="float:left;"><div class="breadcrumb"><a href="sitemap.html">PlantUML</a><a href="sitemap-language-specification.html">Language specification</a><a href="component-diagram.html">Component Diagram</a><a href="component-diagram.html#"></a></div><div id="donate">   <a href="https://discord.gg/sXhzexAQGh" style="text-decoration: none;"><img src="https://img.shields.io/discord/1083727021328306236?color=5865F2&amp;logo=discord&amp;logoColor=white" alt="Discord server"/></a>   <a href="https://github.com/sponsors/plantuml/" style="text-decoration: none;"><img src="https://img.shields.io/github/sponsors/plantuml?logo=github"/></a>   <a href="https://www.patreon.com/bePatron?patAmt=1&amp;u=527450&amp;rid=152970" style="text-decoration: none;"><img src="https://img.shields.io/badge/patreon-122-chocolate?logo=patreon"/></a>   <a href="../lp.html" style="text-decoration: none;"><img src="https://img.shields.io/liberapay/patrons/plantuml?color=gold&amp;logo=liberapay&amp;label=liberapay"/></a>   <a href="../en/paypal.html" style="text-decoration: none;"><img src="https://img.shields.io/badge/paypal-296-skyblue?logo=paypal&amp;logoColor=red"/></a></div></div><div style="float:right; margin:3px 0;"><style>#langlist{display:flex;justify-content:space-between;width:317px;height:16px;margin:3px 10px 3px 0}.sel2{border:2px solid #fefefe}.nosel2{border:2px solid #fefefe;filter:grayscale(100%) opacity(75%)}.sel2:hover,.nosel2:hover{cursor:pointer;border:2px solid #0366d6;border-spacing:0;filter:grayscale(0);filter:contrast(200%);filter:brightness(150%)}#flag1,#flag2,#flag3,#flag4,#flag5,#flag6,#flag7,#flag8{background:url(../flags21.png);background-repeat:no-repeat;background-clip:content-box;width:22px;height:16px}#flag2{background-position:-22px 0}#flag3{background-position:-44px 0}#flag4{background-position:-66px 0}#flag5{background-position:-88px 0}#flag6{background-position:-110px 0}#flag7{background-position:-132px 0}#flag8{background-position:-154px 0}</style><div id="langlist"><div id="flag1" onclick="location.href=&#39;/en/component-diagram&#39;" class="nosel2"></div><div id="flag2" onclick="location.href=&#39;/de/component-diagram&#39;" class="sel2"></div><div id="flag3" onclick="location.href=&#39;/es/component-diagram&#39;" class="nosel2"></div><div id="flag4" onclick="location.href=&#39;/fr/component-diagram&#39;" class="nosel2"></div><div id="flag5" onclick="location.href=&#39;/ja/component-diagram&#39;" class="nosel2"></div><div id="flag6" onclick="location.href=&#39;/ko/component-diagram&#39;" class="nosel2"></div><div id="flag7" onclick="location.href=&#39;/ru/component-diagram&#39;" class="nosel2"></div><div id="flag8" onclick="location.href=&#39;/zh/component-diagram&#39;" class="nosel2"></div></div></div></div><p><style>#topsticky{z-index:2;margin:0 240px 0 0}@media screen and (min-height:800px){#topsticky{position:sticky;top:40px}}@media screen and (max-width:1500px){#topsticky{margin:0}}</style></p><div id="topsticky"><span id="ezoic-pub-ad-placeholder-647"></span><!-- ezoic_pub_ad_placeholder-647-under_page_title-320x100-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-300x50v2-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-320x50-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-468x60-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-728x90-647-nonexxxnonexxxxxxezmaxscaleval100 --></div><p><a style="position:relative;top:-38px;" name="b17b94e5873c5faf"></a><style>#toc{z-index:2;position:sticky;top:40px;list-style-type:none;margin:0;padding:0 10px}.chap{clear:both}#toc ul{list-style-type:none;max-height:87vh;overflow-y:auto;background:#f6f8fa;border-width:2px;border-style:groove;border-radius:3px;border-color:#e1e4e8;margin:0;padding:0}@media screen and (min-height:450px){#toc ul{max-height:89.5vh}}@media screen and (min-height:550px){#toc ul{max-height:91.5vh}}@media screen and (min-height:700px){#toc ul{max-height:93.5vh}}@media screen and (min-height:900px){#toc ul{max-height:94.5vh}}#toc li{margin:5px 5px 5px 10px;padding:0}@media screen and (max-width:1500px){#toctd{display:none}#toc{display:none}}</style><table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr valign="top" width="100%"><td valign="top"><h1 class="chap"><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#0"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#0"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#0"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Komponentendiagramm</h1><p></p><strong>Komponentendiagramm</strong>: Ein Komponentendiagramm ist eine Art von Strukturdiagramm, das in der UML (Unified Modeling Language) verwendet wird, um die Organisation und die Beziehungen von Systemkomponenten zu visualisieren. Diese Diagramme helfen dabei, komplexe Systeme in überschaubare Komponenten zu zerlegen, deren Abhängigkeiten darzustellen und eine effiziente Systemgestaltung und -architektur zu gewährleisten. <p></p><strong>Vorteile von PlantUML</strong>: <ul><li><strong>Einfachheit</strong>: Mit PlantUML können Sie Komponentendiagramme mit einfachen und intuitiven textbasierten Beschreibungen erstellen, wodurch komplexe Zeichenwerkzeuge überflüssig werden.</li><li><strong>Integration</strong>: PlantUML lässt sich nahtlos in verschiedene Werkzeuge und Plattformen integrieren, was es zu einer vielseitigen Wahl für Entwickler und Architekten macht.</li><li><strong>Kollaboration</strong>: Das <a href="../qa.html">PlantUML-Forum</a> bietet eine Plattform für Benutzer, um ihre Diagramme zu diskutieren, auszutauschen und um Unterstützung zu bitten, wodurch eine kollaborative Gemeinschaft gefördert wird.</li></ul><a style="position:relative;top:-38px;" name="05bbb43b3d923283"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#1"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#1"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#1"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Komponenten</h2> Komponenten werden mittels eckiger Klammern definiert. <p></p> Alternativ kann das Schlüsselwort <code class="cod">component</code> verwendet werden, um eine Komponente zu definieren. Mittels Schlüsselwort <code class="cod">as</code> lassen sich Aliase definieren. Aliase können verwendet werden, wenn Beziehungen definiert werden. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg9acf7931bb3e084cdc2141f1a6a24278" class="msg"> 🎉 Copied! </div><img width="16" height="16" id="img9acf7931bb3e084cdc2141f1a6a24278" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;9acf7931bb3e084cdc2141f1a6a24278&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;9acf7931bb3e084cdc2141f1a6a24278&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;9acf7931bb3e084cdc2141f1a6a24278&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre9acf7931bb3e084cdc2141f1a6a24278">@startuml

[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="353" height="185" class="scale" src="../imgw/img-9acf7931bb3e084cdc2141f1a6a24278.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p></p><center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center><a style="position:relative;top:-38px;" name="756640f0aea5f5be"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-179"></span><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-234x60-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-468x60-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-728x90-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-970x90-179-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#2"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#2"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#2"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Schnittstellen</h2><p></p> Schnittstellen werden mit zwei Runden Klammern <code class="cod">()</code> definiert. <p></p> Alternativ kann das Schlüsselwort <code class="cod">interface</code> verwendet werden, um Schnittstellen zu definieren. Mittels Schlüsselwort <code class="cod">as</code> lassen sich Aliase definieren. Aliase können verwendet werden, wenn Beziehungen definiert werden. <p></p> Die Deklaration von Schnittstellen ist optional. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgcc6500bc6163ed2eab1e18d812383ea2" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgcc6500bc6163ed2eab1e18d812383ea2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;cc6500bc6163ed2eab1e18d812383ea2&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;cc6500bc6163ed2eab1e18d812383ea2&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;cc6500bc6163ed2eab1e18d812383ea2&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="precc6500bc6163ed2eab1e18d812383ea2">@startuml

() &#34;First Interface&#34;
() &#34;Another interface&#34; as Interf2
interface Interf3
interface &#34;Last\ninterface&#34; as Interf4

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="258" height="171" class="scale" src="../imgw/img-cc6500bc6163ed2eab1e18d812383ea2.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><a style="position:relative;top:-38px;" name="c96ad883675e26af"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#3"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#3"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#3"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Grundlegendes Beispiel</h2><p></p><p></p><p></p> Verbindungen zwischen Elementen werden durch Kombinationen von gepunkteten Linien (<code class="cod">..</code>), geraden Linien (<code class="cod">--</code>) und Pfeilen (<code class="cod">--&gt;</code>) hergestellt <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg9ec7b6cdaf77851d6b78f617317c3275" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img9ec7b6cdaf77851d6b78f617317c3275" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;9ec7b6cdaf77851d6b78f617317c3275&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;9ec7b6cdaf77851d6b78f617317c3275&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;9ec7b6cdaf77851d6b78f617317c3275&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre9ec7b6cdaf77851d6b78f617317c3275">@startuml

DataAccess - [First Component]
[First Component] ..&gt; HTTP : use

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="238" height="202" class="scale" src="../imgw/img-9ec7b6cdaf77851d6b78f617317c3275.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="d50d8f9219a41435"></a></p><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-114"></span><!-- ezoic_pub_ad_placeholder-114-mid_content-234x60-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-468x60-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-728x90-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-970x90-114-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#4"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#4"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#4"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Notizen</h2><p></p> Schlüsselwörter: <code class="cod">note left of</code> , <code class="cod">note right of</code> , <code class="cod">note top of</code> , <code class="cod">note bottom of</code> Diese Schlüsselwörter können eingesetzt werden, um Notizen für ein einzelnes Objekt zu erstellen. <p></p><p></p> Eine Notiz kann mit <code class="cod">note</code> definiert werden. Danach kann sie mittels <code class="cod">..</code> mit anderen Objekten verbunden werden. <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg26b0fb84af1b52e038ef6865d4805484" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img26b0fb84af1b52e038ef6865d4805484" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;26b0fb84af1b52e038ef6865d4805484&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;26b0fb84af1b52e038ef6865d4805484&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;26b0fb84af1b52e038ef6865d4805484&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre26b0fb84af1b52e038ef6865d4805484">@startuml

interface &#34;Data Access&#34; as DA

DA - [First Component]
[First Component] ..&gt; HTTP : use

note left of HTTP : Web Service only

note right of [First Component]
  A note can also
  be on several lines
end note

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="414" height="185" class="scale" src="../imgw/img-26b0fb84af1b52e038ef6865d4805484.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p></p><p></p><center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center><a style="position:relative;top:-38px;" name="58bb821cf05c48a2"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#5"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#5"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#5"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Gruppierende Komponenten</h2><p></p> Mit <code class="cod">package</code> lassen sich Komponenten und Schnittstellen gruppieren. <ul><li><code class="cod">package</code></li><li><code class="cod">node</code></li><li><code class="cod">folder</code></li><li><code class="cod">frame</code></li><li><code class="cod">cloud</code></li><li><code class="cod">database</code></li></ul><p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg7999202e4eaa6184e31d231b52166132" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img7999202e4eaa6184e31d231b52166132" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;7999202e4eaa6184e31d231b52166132&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;7999202e4eaa6184e31d231b52166132&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;7999202e4eaa6184e31d231b52166132&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre7999202e4eaa6184e31d231b52166132">@startuml

package &#34;Some Group&#34; {
  HTTP - [First Component]
  [Another Component]
}

node &#34;Other Groups&#34; {
  FTP - [Second Component]
  [First Component] --&gt; FTP
}

cloud {
  [Example 1]
}


database &#34;MySql&#34; {
  folder &#34;This is my folder&#34; {
    [Folder 3]
  }
  frame &#34;Foo&#34; {
    [Frame 4]
  }
}


[Another Component] --&gt; [Example 1]
[Example 1] --&gt; [Folder 3]
[Folder 3] --&gt; [Frame 4]

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="487" height="582" class="scale" src="../imgw/img-7999202e4eaa6184e31d231b52166132.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><a style="position:relative;top:-38px;" name="9a49d5ae2dd333a4"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-115"></span><!-- ezoic_pub_ad_placeholder-115-long_content-234x60-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-468x60-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-728x90-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-970x90-115-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#6"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#6"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#6"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Ändern der Pfeilrichtung</h2><p></p><p></p> Verbindungen werden mit zwei Minus-Zeichen <code class="cod">--</code> definiert und sind vertikal orientiert. Um eine horizontale Orientierung zu erhalten, kann die Verbindung mit nur einem Minus-Zeichen (oder Punkt) definiert werden: <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg281b50b1f16c962ef80cc1151e90f390" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img281b50b1f16c962ef80cc1151e90f390" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;281b50b1f16c962ef80cc1151e90f390&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;281b50b1f16c962ef80cc1151e90f390&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;281b50b1f16c962ef80cc1151e90f390&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre281b50b1f16c962ef80cc1151e90f390">@startuml
[Component] --&gt; Interface1
[Component] -&gt; Interface2
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="202" height="184" class="scale" src="../imgw/img-281b50b1f16c962ef80cc1151e90f390.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> Die Pfeilsymbole können umgedreht werden, um die Pfeilrichtung zu ändern: <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg950c7d656dec6910d6881f413fb9ad7b" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img950c7d656dec6910d6881f413fb9ad7b" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;950c7d656dec6910d6881f413fb9ad7b&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;950c7d656dec6910d6881f413fb9ad7b&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;950c7d656dec6910d6881f413fb9ad7b&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre950c7d656dec6910d6881f413fb9ad7b">@startuml
Interface1 &lt;-- [Component]
Interface2 &lt;- [Component]
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="200" height="167" class="scale" src="../imgw/img-950c7d656dec6910d6881f413fb9ad7b.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> Die Pfeilrichtung lässt sich auch mit den Schlüsselwörtern <code class="cod">left</code>, <code class="cod">right</code>, <code class="cod">up</code> und <code class="cod">down</code> ändern. Diese Schlüsselwörter werden innerhalb des Pfeil-Symbols eingesetzt: <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgdaac573c3d335615511ba404f8e979c0" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgdaac573c3d335615511ba404f8e979c0" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;daac573c3d335615511ba404f8e979c0&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;daac573c3d335615511ba404f8e979c0&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;daac573c3d335615511ba404f8e979c0&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="predaac573c3d335615511ba404f8e979c0">@startuml
[Component] -left-&gt; left
[Component] -right-&gt; right
[Component] -up-&gt; up
[Component] -down-&gt; down
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="237" height="281" class="scale" src="../imgw/img-daac573c3d335615511ba404f8e979c0.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> Die Pfeillänge kann verkürzt werden, wenn bei der Deklaration der Pfeilrichtung nur der Anfangsbuchstabe (oder ersten zwei Anfangsbuchstaben) verwendet werden: Beispielsweise <code class="cod">-d-</code> oder <code class="cod">-do-</code> statt <code class="cod">-down-</code>. <p></p> Diese Funktionalität ist jedoch mit Bedacht einzusetzen, da <em>GraphViz</em> normalerweise gute Resultate ohne manuelle Eingriffe erzielt. <p></p><p></p><a style="position:relative;top:-38px;" name="7709bf1c8595d539"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#7"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#7"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#7"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Use UML2 notation</h2><p></p> By default <em>(from v1.2020.13-14)</em>, UML2 notation is used. <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg28531ce8a7af6ebd133e7698fc119103" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img28531ce8a7af6ebd133e7698fc119103" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;28531ce8a7af6ebd133e7698fc119103&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;28531ce8a7af6ebd133e7698fc119103&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;28531ce8a7af6ebd133e7698fc119103&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre28531ce8a7af6ebd133e7698fc119103">@startuml

interface &#34;Data Access&#34; as DA

DA - [First Component]
[First Component] ..&gt; HTTP : use

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="240" height="202" class="scale" src="../imgw/img-28531ce8a7af6ebd133e7698fc119103.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="ad4599d2cea99367"></a></p><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-116"></span><!-- ezoic_pub_ad_placeholder-116-longer_content-234x60-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-468x60-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-728x90-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-970x90-116-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#8"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#8"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#8"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>UML1-Notation verwenden</h2><p></p> Der <code class="cod">skinparam componentStyle uml1</code> Befehl wird werwendet, um in die UML1 Notation umzuschalten. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgdbe1a828cf8a50de5b319b782d5de919" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgdbe1a828cf8a50de5b319b782d5de919" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;dbe1a828cf8a50de5b319b782d5de919&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;dbe1a828cf8a50de5b319b782d5de919&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;dbe1a828cf8a50de5b319b782d5de919&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="predbe1a828cf8a50de5b319b782d5de919">@startuml
skinparam componentStyle uml1

interface &#34;Data Access&#34; as DA

DA - [First Component]
[First Component] ..&gt; HTTP : use

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="220" height="192" class="scale" src="../imgw/img-dbe1a828cf8a50de5b319b782d5de919.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="209c2b6d887c7fde"></a></p><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#9"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#9"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#9"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Use rectangle notation (remove UML notation)</h2><p></p> The <code class="cod">skinparam componentStyle rectangle</code> command is used to switch to rectangle notation <em>(without any UML notation)</em>. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg28344b6279d4b2cda1b64acaf31ceac2" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img28344b6279d4b2cda1b64acaf31ceac2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;28344b6279d4b2cda1b64acaf31ceac2&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;28344b6279d4b2cda1b64acaf31ceac2&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;28344b6279d4b2cda1b64acaf31ceac2&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre28344b6279d4b2cda1b64acaf31ceac2">@startuml
skinparam componentStyle rectangle

interface &#34;Data Access&#34; as DA

DA - [First Component]
[First Component] ..&gt; HTTP : use

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="220" height="192" class="scale" src="../imgw/img-28344b6279d4b2cda1b64acaf31ceac2.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="a52ab216dd03c499"></a></p><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-117"></span><!-- ezoic_pub_ad_placeholder-117-longest_content-234x60-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-468x60-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-728x90-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-970x90-117-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#10"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#10"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#10"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Mehrzeilige Beschreibung</h2> Es ist möglich mehrzeilige Beschreibungen zu erstellen mithilfe von eckigen Klammern <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgd46219a6f11d18b7532ca592cce61d15" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgd46219a6f11d18b7532ca592cce61d15" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;d46219a6f11d18b7532ca592cce61d15&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;d46219a6f11d18b7532ca592cce61d15&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;d46219a6f11d18b7532ca592cce61d15&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pred46219a6f11d18b7532ca592cce61d15">@startuml
component comp1 [
This component
has a long comment
on several lines
]
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="187" height="102" class="scale" src="../imgw/img-d46219a6f11d18b7532ca592cce61d15.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="ea805db4a048a1b7"></a></p><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#11"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#11"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#11"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Individuelle Farben</h2><p></p><p></p> Eine Farbe kann nach der Komponenten Definition angeben werden. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg2c31195f2b7dac593a2f6cd97e6c3c76" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img2c31195f2b7dac593a2f6cd97e6c3c76" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;2c31195f2b7dac593a2f6cd97e6c3c76&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;2c31195f2b7dac593a2f6cd97e6c3c76&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;2c31195f2b7dac593a2f6cd97e6c3c76&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre2c31195f2b7dac593a2f6cd97e6c3c76">@startuml
component  [Web Server] #Yellow
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="135" height="67" class="scale" src="../imgw/img-2c31195f2b7dac593a2f6cd97e6c3c76.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p></p><a style="position:relative;top:-38px;" name="1f0a05cc7e120849"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-118"></span><!-- ezoic_pub_ad_placeholder-118-incontent_5-234x60-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-468x60-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-728x90-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-970x90-118-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#12"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#12"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#12"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Verwendung von Sprites in Stereotypen</h2> Sie können Sprites innerhalb von stereotypen Komponenten verwenden. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg125a3138bfc6f7888d6ca9130e3fe487" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img125a3138bfc6f7888d6ca9130e3fe487" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;125a3138bfc6f7888d6ca9130e3fe487&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;125a3138bfc6f7888d6ca9130e3fe487&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;125a3138bfc6f7888d6ca9130e3fe487&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre125a3138bfc6f7888d6ca9130e3fe487">@startuml
sprite $businessProcess [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}


rectangle &#34; End to End\nbusiness process&#34; &lt;&lt;$businessProcess&gt;&gt; {
 rectangle &#34;inner process 1&#34; &lt;&lt;$businessProcess&gt;&gt; as src
 rectangle &#34;inner process 2&#34; &lt;&lt;$businessProcess&gt;&gt; as tgt
 src -&gt; tgt
}
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="315" height="152" class="scale" src="../imgw/img-125a3138bfc6f7888d6ca9130e3fe487.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><a style="position:relative;top:-38px;" name="7aa53dbdfc2137bf"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#13"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#13"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#13"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Der Skinparam Befehl</h2><p></p> Mit dem <a href="skinparam.html">skinparam</a> Befehl kann die Farbe und die Schriftart der Zeichnung verändert werden. <p></p> Sie können den Befehl auf die folgenden Arten verwenden: <ul><li>Wie alle anderen Befehle in einer Diagrammdefinition,</li><li>In einer <a href="preprocessing.html">Include-Datei</a>,</li><li>In einer Konfigurationsdatei, die durch die <a href="command-line.html">Kommandozeile</a> oder den <a href="ant-task.html">ANT-Task</a> übergeben wird.</li></ul><p></p> Es können unterschiedliche Farben und Schriftarten für &#34;stereotypisierte&#34; Komponenten und Schnittstellen verwendet werden. <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgb12cbf0f80cb29d14348916cde25714a" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgb12cbf0f80cb29d14348916cde25714a" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;b12cbf0f80cb29d14348916cde25714a&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;b12cbf0f80cb29d14348916cde25714a&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;b12cbf0f80cb29d14348916cde25714a&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="preb12cbf0f80cb29d14348916cde25714a">@startuml

skinparam interface {
  backgroundColor RosyBrown
  borderColor orange
}

skinparam component {
  FontSize 13
  BackgroundColor&lt;&lt;Apache&gt;&gt; Pink
  BorderColor&lt;&lt;Apache&gt;&gt; #FF6655
  FontName Courier
  BorderColor black
  BackgroundColor gold
  ArrowFontName Impact
  ArrowColor #FF6655
  ArrowFontColor #777777
}

() &#34;Data Access&#34; as DA
Component &#34;Web Server&#34; as WS &lt;&lt; Apache &gt;&gt;

DA - [First Component]
[First Component] ..&gt; () HTTP : use
HTTP - WS

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="338" height="202" class="scale" src="../imgw/img-b12cbf0f80cb29d14348916cde25714a.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg9519b5d1e8f57ce485c943a8b5fe8228" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img9519b5d1e8f57ce485c943a8b5fe8228" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;9519b5d1e8f57ce485c943a8b5fe8228&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;9519b5d1e8f57ce485c943a8b5fe8228&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;9519b5d1e8f57ce485c943a8b5fe8228&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre9519b5d1e8f57ce485c943a8b5fe8228">@startuml

skinparam component {
  backgroundColor&lt;&lt;static lib&gt;&gt; DarkKhaki
  backgroundColor&lt;&lt;shared lib&gt;&gt; Green
}

skinparam node {
  borderColor Green
  backgroundColor Yellow
  backgroundColor&lt;&lt;shared_node&gt;&gt; Magenta
}
skinparam databaseBackgroundColor Aqua

[AA] &lt;&lt;static lib&gt;&gt;
[BB] &lt;&lt;shared lib&gt;&gt;
[CC] &lt;&lt;static lib&gt;&gt;

node node1
node node2 &lt;&lt;shared_node&gt;&gt;
database Production

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="415" height="213" class="scale" src="../imgw/img-9519b5d1e8f57ce485c943a8b5fe8228.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="75b4984abd04b14f"></a></p><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-119"></span><!-- ezoic_pub_ad_placeholder-119-incontent_6-234x60-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-468x60-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-728x90-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-970x90-119-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#14"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#14"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#14"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Specific SkinParameter</h2><p></p><h3>componentStyle </h3><p></p><ul><li>By default (or with <code class="cod">skinparam componentStyle uml2</code>), you have an icon for component</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgc2639090192e7df466effcc7e134b2f8" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgc2639090192e7df466effcc7e134b2f8" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;c2639090192e7df466effcc7e134b2f8&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;c2639090192e7df466effcc7e134b2f8&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;c2639090192e7df466effcc7e134b2f8&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="prec2639090192e7df466effcc7e134b2f8">@startuml
skinparam BackgroundColor transparent
skinparam componentStyle uml2
component A {
   component &#34;A.1&#34; {
}
   component A.44 {
      [A4.1]
}
   component &#34;A.2&#34;
   [A.3]
   component A.5 [
A.5] 
   component A.6 [
]
}
[a]-&gt;[b]
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="576" height="264" class="scale" src="../imgw/img-c2639090192e7df466effcc7e134b2f8.png"/></div></div></td></tr></tbody></table></p><p></p><ul><li>If you want to suppress it, and to have only the rectangle, you can use <code class="cod">skinparam componentStyle rectangle</code></li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg65b87dfac90e58cea51a332aa497ce23" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img65b87dfac90e58cea51a332aa497ce23" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;65b87dfac90e58cea51a332aa497ce23&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;65b87dfac90e58cea51a332aa497ce23&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;65b87dfac90e58cea51a332aa497ce23&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre65b87dfac90e58cea51a332aa497ce23">@startuml
skinparam BackgroundColor transparent
skinparam componentStyle rectangle
component A {
   component &#34;A.1&#34; {
}
   component A.44 {
      [A4.1]
}
   component &#34;A.2&#34;
   [A.3]
   component A.5 [
A.5] 
   component A.6 [
]
}
[a]-&gt;[b]
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="456" height="244" class="scale" src="../imgw/img-65b87dfac90e58cea51a332aa497ce23.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><em>[Ref. <a href="https://forum.plantuml.net/10798">10798</a>]</em><a style="position:relative;top:-38px;" name="0a05899a20325958"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#15"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#15"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#15"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Hide or Remove unlinked component</h2><p></p> By default, all components are displayed: <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgae3fb99ee7f4170a9b24fa508136074d" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgae3fb99ee7f4170a9b24fa508136074d" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;ae3fb99ee7f4170a9b24fa508136074d&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;ae3fb99ee7f4170a9b24fa508136074d&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;ae3fb99ee7f4170a9b24fa508136074d&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="preae3fb99ee7f4170a9b24fa508136074d">@startuml
component C1
component C2
component C3
C1 -- C2
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="163" height="167" class="scale" src="../imgw/img-ae3fb99ee7f4170a9b24fa508136074d.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> But you can: <ul><li><code class="cod">hide @unlinked</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgeb7cffaf1de8c5022e578e6561a5af36" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgeb7cffaf1de8c5022e578e6561a5af36" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;eb7cffaf1de8c5022e578e6561a5af36&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;eb7cffaf1de8c5022e578e6561a5af36&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;eb7cffaf1de8c5022e578e6561a5af36&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="preeb7cffaf1de8c5022e578e6561a5af36">@startuml
component C1
component C2
component C3
C1 -- C2

hide @unlinked
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="163" height="167" class="scale" src="../imgw/img-eb7cffaf1de8c5022e578e6561a5af36.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><ul><li>or <code class="cod">remove @unlinked</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg7bb6b3cac2c06fe03b38ab6840aa152b" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img7bb6b3cac2c06fe03b38ab6840aa152b" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;7bb6b3cac2c06fe03b38ab6840aa152b&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;7bb6b3cac2c06fe03b38ab6840aa152b&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;7bb6b3cac2c06fe03b38ab6840aa152b&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre7bb6b3cac2c06fe03b38ab6840aa152b">@startuml
component C1
component C2
component C3
C1 -- C2

remove @unlinked
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="70" height="167" class="scale" src="../imgw/img-7bb6b3cac2c06fe03b38ab6840aa152b.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p></p><em>[Ref. <a href="https://forum.plantuml.net/11052">QA-11052</a>]</em><a style="position:relative;top:-38px;" name="e966f55ffa507384"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-120"></span><!-- ezoic_pub_ad_placeholder-120-incontent_7-234x60-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-468x60-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-728x90-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-970x90-120-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#16"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#16"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#16"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Hide, Remove or Restore tagged component or wildcard</h2><p></p> You can put <code class="cod">$tags</code> (using <code class="cod">$</code>) on components, then remove, hide or restore components either individually or by tags. <p></p> By default, all components are displayed: <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg1644f8b9f24634fb27aca21f57f3b888" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img1644f8b9f24634fb27aca21f57f3b888" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;1644f8b9f24634fb27aca21f57f3b888&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;1644f8b9f24634fb27aca21f57f3b888&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;1644f8b9f24634fb27aca21f57f3b888&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre1644f8b9f24634fb27aca21f57f3b888">@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="163" height="167" class="scale" src="../imgw/img-1644f8b9f24634fb27aca21f57f3b888.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> But you can: <ul><li><code class="cod">hide $tag13</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgc25f15696a9d946938fd06e06925aa07" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgc25f15696a9d946938fd06e06925aa07" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;c25f15696a9d946938fd06e06925aa07&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;c25f15696a9d946938fd06e06925aa07&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;c25f15696a9d946938fd06e06925aa07&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="prec25f15696a9d946938fd06e06925aa07">@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2

hide $tag13
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="163" height="167" class="scale" src="../imgw/img-c25f15696a9d946938fd06e06925aa07.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><ul><li>or <code class="cod">remove $tag13</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgf56e5569920e6e5c591cc65ec30da7cc" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgf56e5569920e6e5c591cc65ec30da7cc" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f56e5569920e6e5c591cc65ec30da7cc&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f56e5569920e6e5c591cc65ec30da7cc&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;f56e5569920e6e5c591cc65ec30da7cc&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pref56e5569920e6e5c591cc65ec30da7cc">@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2

remove $tag13
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="70" height="59" class="scale" src="../imgw/img-f56e5569920e6e5c591cc65ec30da7cc.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><ul><li>or <code class="cod">remove $tag13 and restore $tag1</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgf951862a4ab31cc4e2f54b844bbce285" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgf951862a4ab31cc4e2f54b844bbce285" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f951862a4ab31cc4e2f54b844bbce285&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f951862a4ab31cc4e2f54b844bbce285&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;f951862a4ab31cc4e2f54b844bbce285&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pref951862a4ab31cc4e2f54b844bbce285">@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2

remove $tag13
restore $tag1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="70" height="167" class="scale" src="../imgw/img-f951862a4ab31cc4e2f54b844bbce285.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><ul><li>or <code class="cod">remove * and restore $tag1</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msge3229d26c40dae9e9e23d0a0f20b6582" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imge3229d26c40dae9e9e23d0a0f20b6582" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;e3229d26c40dae9e9e23d0a0f20b6582&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;e3229d26c40dae9e9e23d0a0f20b6582&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;e3229d26c40dae9e9e23d0a0f20b6582&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pree3229d26c40dae9e9e23d0a0f20b6582">@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2

remove *
restore $tag1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="6" height="6" class="scale" src="../imgw/img-e3229d26c40dae9e9e23d0a0f20b6582.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><em>[Ref. <a href="https://forum.plantuml.net/7337">QA-7337</a> and <a href="https://forum.plantuml.net/11052">QA-11052</a>]</em><a style="position:relative;top:-38px;" name="82248f3257b14836"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#17"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#17"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#17"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Display JSON Data on Component diagram</h2><p></p><h3>Simple example</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg2e2e3910f5ed154a1fc3a82c716685df" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img2e2e3910f5ed154a1fc3a82c716685df" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;2e2e3910f5ed154a1fc3a82c716685df&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;2e2e3910f5ed154a1fc3a82c716685df&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;2e2e3910f5ed154a1fc3a82c716685df&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre2e2e3910f5ed154a1fc3a82c716685df">@startuml
allowmixing

component Component
()        Interface

json JSON {
   &#34;fruit&#34;:&#34;Apple&#34;,
   &#34;size&#34;:&#34;Large&#34;,
   &#34;color&#34;: [&#34;Red&#34;, &#34;Green&#34;]
}
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="224" height="239" class="scale" src="../imgw/img-2e2e3910f5ed154a1fc3a82c716685df.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><em>[Ref. <a href="https://forum.plantuml.net/15481/possible-link-elements-from-two-jsons-with-both-jsons-embeded?show=15567#c15567">QA-15481</a>]</em><p></p> For another example, see on <a href="json.html#2fyxla9p9ob6l3t3tjre">JSON page</a>. <a style="position:relative;top:-38px;" name="76402ab93d6541bf"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-121"></span><!-- ezoic_pub_ad_placeholder-121-incontent_8-234x60-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-468x60-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-728x90-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-970x90-121-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/de/component-diagram#18"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/de/component-diagram#18"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/de/component-diagram#18"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Port [port, portIn, portOut]</h2><p></p> You can add <strong>port</strong> with <code class="cod">port</code>, <code class="cod">portin</code>and <code class="cod">portout</code> keywords. <p></p><h3>Port</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgdffcfcaac0887d4f478edfc5022f9f22" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgdffcfcaac0887d4f478edfc5022f9f22" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;dffcfcaac0887d4f478edfc5022f9f22&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;dffcfcaac0887d4f478edfc5022f9f22&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;dffcfcaac0887d4f478edfc5022f9f22&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="predffcfcaac0887d4f478edfc5022f9f22">@startuml
[c]
component C {
  port p1
  port p2
  port p3
  component c1
}

c --&gt; p1
c --&gt; p2
c --&gt; p3
p1 --&gt; c1
p2 --&gt; c1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="150" height="256" class="scale" src="../imgw/img-dffcfcaac0887d4f478edfc5022f9f22.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><h3>PortIn</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgebc399c07f4f0b31180d4edba4c66d60" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgebc399c07f4f0b31180d4edba4c66d60" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;ebc399c07f4f0b31180d4edba4c66d60&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;ebc399c07f4f0b31180d4edba4c66d60&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;ebc399c07f4f0b31180d4edba4c66d60&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="preebc399c07f4f0b31180d4edba4c66d60">@startuml
[c]
component C {
  portin p1
  portin p2
  portin p3
  component c1
}

c --&gt; p1
c --&gt; p2
c --&gt; p3
p1 --&gt; c1
p2 --&gt; c1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="150" height="256" class="scale" src="../imgw/img-ebc399c07f4f0b31180d4edba4c66d60.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><h3>PortOut</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgf3682745cb9fb9f4ddd017a62c4ee1e0" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgf3682745cb9fb9f4ddd017a62c4ee1e0" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f3682745cb9fb9f4ddd017a62c4ee1e0&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f3682745cb9fb9f4ddd017a62c4ee1e0&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;f3682745cb9fb9f4ddd017a62c4ee1e0&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pref3682745cb9fb9f4ddd017a62c4ee1e0">@startuml
component C {
  portout p1
  portout p2
  portout p3
  component c1
}
[o]
p1 --&gt; o
p2 --&gt; o
p3 --&gt; o
c1 --&gt; p1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="157" height="255" class="scale" src="../imgw/img-f3682745cb9fb9f4ddd017a62c4ee1e0.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><h3>Mixing PortIn &amp; PortOut</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgf5f401b9cd65a8b934f735e5e3d7e6c2" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgf5f401b9cd65a8b934f735e5e3d7e6c2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f5f401b9cd65a8b934f735e5e3d7e6c2&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f5f401b9cd65a8b934f735e5e3d7e6c2&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;f5f401b9cd65a8b934f735e5e3d7e6c2&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pref5f401b9cd65a8b934f735e5e3d7e6c2">@startuml
[i]
component C {
  portin p1
  portin p2
  portin p3
  portout po1
  portout po2
  portout po3
  component c1
}
[o]

i --&gt; p1
i --&gt; p2
i --&gt; p3
p1 --&gt; c1
p2 --&gt; c1
po1 --&gt; o
po2 --&gt; o
po3 --&gt; o
c1 --&gt; po1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="157" height="419" class="scale" src="../imgw/img-f5f401b9cd65a8b934f735e5e3d7e6c2.png"/></div></div></td></tr></tbody></table></p><p></p></td><td id="toctd" valign="top" style="max-width:240px;min-width:240px;"><div id="toc"><ul><li><a href="component-diagram.html#05bbb43b3d923283">Komponenten</a></li><li><a href="component-diagram.html#756640f0aea5f5be">Schnittstellen</a></li><li><a href="component-diagram.html#c96ad883675e26af">Grundlegendes Beispiel</a></li><li><a href="component-diagram.html#d50d8f9219a41435">Notizen</a></li><li><a href="component-diagram.html#58bb821cf05c48a2">Gruppierende Komponenten</a></li><li><a href="component-diagram.html#9a49d5ae2dd333a4">Ändern der Pfeilrichtung</a></li><li><a href="component-diagram.html#7709bf1c8595d539">Use UML2 notation</a></li><li><a href="component-diagram.html#ad4599d2cea99367">UML1-Notation verwenden</a></li><li><a href="component-diagram.html#209c2b6d887c7fde">Use rectangle notation (remove UML notation)</a></li><li><a href="component-diagram.html#a52ab216dd03c499">Mehrzeilige Beschreibung</a></li><li><a href="component-diagram.html#ea805db4a048a1b7">Individuelle Farben</a></li><li><a href="component-diagram.html#1f0a05cc7e120849">Verwendung von Sprites in Stereotypen</a></li><li><a href="component-diagram.html#7aa53dbdfc2137bf">Der Skinparam Befehl</a></li><li><a href="component-diagram.html#75b4984abd04b14f">Specific SkinParameter</a></li><li><a href="component-diagram.html#0a05899a20325958">Hide or Remove unlinked component</a></li><li><a href="component-diagram.html#e966f55ffa507384">Hide, Remove or Restore tagged component or wildcard</a></li><li><a href="component-diagram.html#82248f3257b14836">Display JSON Data on Component diagram</a></li><li><a href="component-diagram.html#76402ab93d6541bf">Port [port, portIn, portOut]</a></li></ul></div></td></tr></tbody></table></p><p></p><span id="ezoic-pub-ad-placeholder-104"></span><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-234x60-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-468x60-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-728x90-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-970x250-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-300x250x3-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-970x90-104-nonexxxnonexxxxxxezmaxscaleval100 --></div><style>.btm{text-align:center}.btm a{text-decoration:none;color:#637282}.btm a:hover{color:#0366d6}</style><div class="btm"><hr/><a href="https://g.ezoic.net/privacy/plantuml.com"><small>Privacy Policy</small></a>      <a href="../direct-sales.html"><small>Advertise</small></a><p></p></div><script>var sc_project=11129478;var sc_invisible=1;var sc_security="ff6d21f8";</script><script async="" src="https://www.statcounter.com/counter/counter.js"></script><!--[selectrongo:done]--><script type="text/javascript">
				var __inScopeForCCPA = false;
		function __uspapi(command, version, callback) {
			var response = null;
			var successs = false;
			if (command === "getUSPData" && version === 1) {
				var uspString = "1"; // Version
				if (__inScopeForCCPA) {
					uspString += "N"; // Has Explicit Notice for Opt Out been provided (ex footer or minor consent modal)
					var result;
					var consentCookie = (result = new RegExp('(?:^|; )ezoccpaconsent=([^;]*)').exec(document.cookie)) ? (result[1]) : null;
					if (consentCookie === "nonconsent") {
						uspString += "Y";
					}
					else {
						uspString += "N";
					}
					uspString += "N" // Is pub a signatory to the IAB Limited Service Provider Agreement (http://www.iabprivacy.com/)
				}
				else {
					uspString += "---";
				}
				response = {
					uspString: uspString,
					version: 1
				};
				success = true;
			}
			return callback(response, success);
		};
		function __receiveUspapiMessage(event) {
			if (event.data.hasOwnProperty('__uspapiCall')) {
				__uspapi('getUSPData', 1, function(uspData, success) {
					event.source.postMessage({
						__uspapiReturn: {
							returnValue: uspData,
							success: success,
							callId: event.data.__uspapiCall.callId
						}
					},
					event.origin);
				});
			}
			return null;
		};
		window.addEventListener("message", __receiveUspapiMessage, false);
</script>
<script>__ez.queue.addFile('/tardisrocinante/vitals.js', '/tardisrocinante/vitals.js?gcb=2&cb=3', false, ['/parsonsmaize/mulvane.js'], true, false, true, false);</script>
<script>var _audins_dom="plantuml_com",_audins_did=173770;__ez.queue.addDelayFunc("audins.js","__ez.script.add", "//go.ezodn.com/detroitchicago/audins.js?cb=195-2");</script><noscript><div style="display:none;"><img src="https://pixel.quantserve.com/pixel/p-31iz6hfFutd16.gif?labels=Domain.plantuml_com,DomainId.173770" border="0" height="1" width="1" alt="Quantcast"/></div></noscript>
<script>__ez.queue.addFile('/beardeddragon/drake.js', '/beardeddragon/drake.js?gcb=2&cb=4', false, [], true, false, true, false);</script>
<script type="text/javascript" style='display:none;'>var __ez_dims = (function() {
		var setCookie = function( name, content, expiry ) {
			return document.cookie = name+'='+content+((expiry)?';expires='+(new Date(Math.floor(new Date().getTime()+expiry*1000)).toUTCString()):'')+';path=/';
		};
		var ffid = 1;
		var oh = window.screen.height;
		var ow = window.screen.width;
		var h = ffid === 1 ? oh : (oh > ow) ? oh : ow;
		var w = ffid === 1 ? ow : (oh > ow) ? ow : oh;
		var uh = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
		var uw = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
		setCookie('ezds', encodeURIComponent('ffid='+ffid+',w='+w+',h='+h), (31536e3*7));
		setCookie('ezohw', encodeURIComponent('w='+uw+',h='+uh), (31536e3*7));
	})();</script>
<script type='text/javascript' style='display:none;' async>__ez.queue.addFile('/parsonsmaize/chanute.js', '/parsonsmaize/chanute.js?a=a&cb=7&dcb=195-2&shcb=34', true, ['/parsonsmaize/mulvane.js'], true, false, false, false);</script>
<script type='text/javascript' style='display:none;' async>__ez.queue.addFile('/porpoiseant/jellyfish.js', '/porpoiseant/jellyfish.js?a=a&cb=10&dcb=195-2&shcb=34', false, [], true, false, false, false);</script></body></html>